<template>
	<scroll-view :class="['grace-nav-bar', isCenter ? 'grace-nav-center' : '']" :scroll-x="true" :show-scrollbar="false"
	 :scroll-into-view="'tab-'+currentIndex+autoLeft">
		<view class="nav-item" :id="'tab-'+index" :style="{width:size < 1 ? 'auto' : size+'rpx', marginRight:margin+'rpx', padding:'0rpx '+padding,textAlign:'center',flex:1}"
		 v-for="(item, index) in items" :key="index" @click="navchang" :data-index="index">
			<view :class="['nav-item-title', currentIndex == index ? 'nav-active' : '']" 
			:style="{color:currentIndex == index ? activeColor : color, textAlign : textAlign, lineHeight:lineHeight,
			 fontSize:currentIndex == index ? activeFontSize : fontSize, fontWeight:currentIndex == index ? activeFontWeight : ''}">{{item}}</view>
			<view class="nav-active-line-wrap" :style="{justifyContent:activeDirection}">
				<view class="nav-active-line" :class="[currentIndex == index && animatie ?'grace-nav-scale':'']" 
				:style="{background:activeLineBg, width:activeLineWidth, height:activeLineHeight, borderRadius:activeLineRadius}"
				 v-if="currentIndex == index"></view>
			</view>
		</view>
	</scroll-view>
</template>
<script>
	export default {
		props: {
			isCenter: {
				type: Boolean,
				default: false
			},
			currentIndex: {
				type: Number,
				default: 0
			},
			size: {
				type: Number,
				default: 100
			},
			fontSize: {
				type: String,
				default: '28rpx'
			},
			activeFontSize: {
				type: String,
				default: '28rpx'
			},
			items: {
				type: Array,
				default: function() {
					return []
				}
			},
			activeLineBg: {
				type: String,
				default: "linear-gradient(to right, #66BFFF,#3388FF)"
			},
			color: {
				type: String,
				default: "#333333"
			},
			activeColor: {
				type: String,
				default: "#333333"
			},
			activeLineHeight: {
				type: String,
				default: '6rpx'
			},
			activeLineWidth: {
				type: String,
				default: "100%"
			},
			activeLineRadius: {
				type: String,
				default: "0rpx"
			},
			activeDirection: {
				type: String,
				default: ""
			},
			activeFontWeight: {
				type: Number,
				default: 700
			},
			margin: {
				type: Number,
				default: 0
			},
			textAlign: {
				type: String,
				default: ''
			},
			lineHeight: {
				type: String,
				default: '50rpx'
			},
			padding: {
				type: String,
				default: '0rpx'
			},
			animatie: {
				type: Boolean,
				default: true
			},
			autoLeft: {
				type: String,
				default: ''
			}
		},
		methods: {
			navchang: function(e) {
				this.$emit('change', Number(e.currentTarget.dataset.index))
			}
		}
	}
</script>
<style scoped>
	.uni-scroll-view-content {
		display: flex !important;
	}

	/* #ifndef MP-ALIPAY */
	.grace-nav-bar {
		width: 100%;
		display: flex;
		white-space: nowrap;
	}

	/* #endif */
	/* #ifdef MP-ALIPAY */
	.grace-nav-bar {
		width: 100%;
		white-space: nowrap;
	}

	/* #endif */
	.nav-item {
		width: 100rpx;
		display: inline-flex;
		flex-direction: column;
	}

	.nav-item-title {
		width: 100%;
		color: #333333;
	}

	.nav-active {}

	.nav-active-line-wrap {
		display: flex;
	}

	.nav-active-line {
		margin-top: 5rpx;
	}

	.grace-nav-center {
		display: flex;
		text-align: center;
		justify-content: space-around;
	}

	@keyframes grace-nav-scale {
		0% {
			transform: scale(0.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.grace-nav-scale {
		animation: grace-nav-scale 300ms forwards;
	}
</style>
